<template>
  <view class="home-container">
    <!-- 顶部图片/Banner区域 -->
    <view class="banner">
      <!-- 这里可以放置背景图片 -->
      <image class="banner-image" src="https://rsl-plus.oss-rg-china-mainland.aliyuncs.com/首页.jpg" mode="aspectFill"></image>
      <view class="banner-text-overlay">
        <text class="banner-title">美味源自用心,服务始于微笑!</text>
      </view>
    </view>

    <!-- 功能入口区域 -->
    <view class="features-container">
      <!-- 点餐 -->
      <view class="feature-item order-food" @tap="goToOrder">
        <text class="feature-title">点餐</text>
        <text class="feature-description">轻松选择美味菜品，享受极速服务</text>
      </view>

      <!-- 自检和帮助中心 -->
      <view class="features-bottom">
        <view class="feature-item self-check" @tap="goToSelfCheck">
          <text class="feature-title">自检</text>
          <text class="feature-description">确保每一处都干净整洁，打造安心就餐环境</text>
        </view>
        <view class="feature-item help-center" @tap="goToHelpCenter">
          <text class="feature-title">帮助中心</text>
          <text class="feature-description">总部进货,技术指导完备的经营资料</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '首页'
    }
  },
  onLoad() {

  },
  methods: {
    goToSelfCheck() {
      uni.navigateTo({
        url: 'self-check'
      })
    },
    goToHelpCenter() {
      uni.navigateTo({
        url: '/src/pages/home/help-center'
      })
    },
    goToOrder() {
      uni.switchTab({
        url: '/src/pages/order/index'
      })
    }
  }
}
</script>

<style>
.home-container {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8; /* 匹配全局背景色 */
  min-height: 100vh;
}

.banner {
  width: 100%;
  height: 550rpx; /* 增加图片高度 */
  position: relative;
}

.banner-image {
  width: 100%;
  height: 100%;
}

.banner-text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff; /* 文本颜色 */
  font-size: 40rpx;
  font-weight: bold;
  text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5); /* 添加文字阴影提高可读性 */
}

.features-container {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx; /* 功能块之间的间距 */
}

.feature-item {
  border-radius: 20rpx; /* 圆角 */
  padding: 40rpx;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.order-food {
  background-color: #c2181d; /* 红色 */
  height: 200rpx; /* 示例高度 */
}

.features-bottom {
  display: flex;
  gap: 30rpx;
}

.self-check,
.help-center {
  flex: 1;
  height: 250rpx; /* 示例高度 */
}

.self-check {
  background-color: #008CB5; /* 蓝色，这里使用了示例蓝色，可能需要微调 */
}

.help-center {
  background-color: #c2181d; /* 红色 */
}

.feature-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.feature-description {
  font-size: 28rpx;
  opacity: 0.9;
}
</style> 